<template>
  <div class="box" v-for="(item, index) in list" :key="index">
    <div class="box-first clearfix">
      <img class="fl" :src="item.avatar" alt="">
      <div class="text">
        <p class="yc name">{{item.nickname}}</p>
        <p>{{item.text}}</p>
      </div>
      <div class="content" v-for="(it, ins) in item.sub_comment" :key="ins">
       <div class="box-first clearfix">
          <img class="fl" :src="it.avatar" alt="">
          <div class="text">
            <p class="yc name">{{it.nickname}}</p>
            <p>{{it.text}}</p>
          </div> 
       </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref,onMounted} from 'vue'
import {getList} from '@/utils/api'

const list = ref([]);
const get = async ()=>{
  // console.log(2);
  let {data} = await getList();
  console.log(data);
  list.value = data.comments;
  // console.log(list.value);
}

onMounted(() => {
  get();
})
</script>
<style lang="scss" scoped>
  .box{
    width: 100%;
    height: 500px;
    // background: orange;
    .box-first{
      height: 80px;
    }
    img{
      width: 60px;
      height: 60px;
      background: #ccc;
      border-radius: 50%;
      margin-right: 20px;
    }
    .text{
      height: 100%;
      .name{
        width: 150px;
        font-size: 12px;
        line-height: 30px;
      }
    }
    .content{
      margin-left: 80px;
    }
  }
</style>
